<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>DataGrid Pagination - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="./easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./easyui/themes/icon.css">
    <script type="text/javascript" src="./easyui/jquery.min.js"></script>
    <script type="text/javascript" src="./easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>DataGrid Pagination Demo</h2>
<div style="margin-bottom:10px">
    <p>Click the page bar to change page number or page size.</p>
</div>
<p>
    Pagination on
    <select id="p-pos" onchange="changeP()">
        <option>bottom</option>
        <option>top</option>
        <option>both</option>
    </select>
    Style
    <select id="p-style" onchange="changeP()">
        <option>manual</option>
        <option>links</option>
    </select>
</p>

<table id="tt" class="easyui-datagrid" style="width:700px;height:250px"
       url="/user/list"
       title="Load Data" iconCls="icon-save"
       rownumbers="true" pagination="true">
    <thead>
    <tr>
        <th field="userId" width="80">用户ID</th>
        <th field="userName" width="120">用户名称</th>
        <th field="listprice" width="80" align="right">List Price</th>
        <th field="unitcost" width="80" align="right">Unit Cost</th>
        <th field="attr1" width="200">Attribute</th>
        <th field="status" width="60" align="center">Stauts</th>
    </tr>
    </thead>
</table>
<script type="text/javascript">
        function changeP(){
            var dg = $('#tt');
            dg.datagrid('loadData',[]);
            dg.datagrid({pagePosition:$('#p-pos').val()});
            dg.datagrid('getPager').pagination({
                layout:['list','sep','first','prev','sep',$('#p-style').val(),'sep','next','last','sep','refresh','info']
            });
        }
    </script>
</body>
</html>